<template>
    <div id='iTable' class='i-tbale'>
        <Row align="middle" justify="end" :style="{ 'margin-bottom': '10px' }" v-show="tableConfig.tool.isShow">
            <div style="margin-left: 8px;position: absolute; left: 8px; margin-bottom: 10px;display:flex;">
                <template v-for="item in tableConfig.tableButton">
                    <Button v-if="item.type !== 'component'" :size="item.size" :icon="item.icon" @click="tableConfig.event[item.event](item.type)" :type="item.type" :style="item.style" :ghost="item.ghost">
                        <span v-if="item.isCustomIcon" :class="'iconfont icon-'+item.customIcon"></span> {{ item.label }}
                    </Button>
                    <component v-if="item.type == 'component'" :is="item.comment" :comData="item" :event="item.event" style="margin-left:15px;" />
                </template>
            </div>
            <div class="ivu-inline-block ivu-fr">
                <Dropdown @on-click="changeTableSize" trigger="click">
                    <Tooltip class="ivu-ml" content="密度" placement="top">
                        <i-link>
                            <Icon type="md-list" />
                        </i-link>
                    </Tooltip>
                    <DropdownMenu slot="list">
                        <DropdownItem name="default" :selected="table.tableSize === 'default'">默认</DropdownItem>
                        <DropdownItem name="large" :selected="table.tableSize === 'large'">宽松</DropdownItem>
                        <DropdownItem name="small" :selected="table.tableSize === 'small'">紧凑</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Tooltip class="ivu-ml" :content="table.tableFullscreen ? '退出全屏' : '全屏'" placement="top">
                    <i-link @click.native="handleFullscreen">
                        <Icon :custom=" table.tableFullscreen ? 'i-icon i-icon-exit-full-screen' : 'i-icon i-icon-full-screen'" />
                    </i-link>
                </Tooltip>
                <Tooltip class="ivu-ml" content="刷新" placement="top">
                    <i-link @click.native="handleRefresh">
                        <Icon custom="i-icon i-icon-refresh" />
                    </i-link>
                </Tooltip>
                <Dropdown trigger="click">
                    <Tooltip class="ivu-ml" content="列设置" placement="top">
                        <i-link>
                            <Icon type="md-options" />
                        </i-link>
                    </Tooltip>
                    <DropdownMenu slot="list">
                        <div class="ivu-p-8">列展示</div>
                        <Divider size="small" class="ivu-mt-8 ivu-mb-8" />
                        <li class="ivu-dropdown-item" v-for="item in tableConfig.columns" :key="item.title" v-if="item.title" @click="item.show = !item.show">
                            <Checkbox v-model="item.show"></Checkbox>
                            <span>{{ item.title }}</span>
                        </li>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </Row>
        <!-- :height="'500px'" max-height="600px" -->
        <Table ref="table" :height="tableConfig.prop.height" :max-height="tableConfig.prop['max-height']" :data='list' row-key="id" :load-data="handleLoadData" @on-selection-change="onSelectiOnchange" @on-select-all="onSelectAll" @on-select='onSelect' :highlight-row="tableConfig.prop.higlightRow" @on-current-change="onCurrentChange" border :size="table.tableSize" :columns="tableColumns">
            <template v-for="item in tableConfig.columns" slot-scope="{ row }" :slot="item.slot ? item.slot : ''">
                <template v-if="item.slotTem">
                    <slot :name="item.slotTem" :dataS="row"></slot>
                </template>
                <template v-else>
                    <component :ref="item.key" :row="row" :is="item.component" :lableKey="item.key" :key="item.key" :event="tableConfig.event[item.eventKey]" />
                </template>
            </template>
            <template slot-scope="{ row }" slot="action">
                <template v-if="!tableConfig.handel.compnent">
                    <div @click.stop.prevent>
                        <template v-for="(item,index) in tableConfig.handel">
                            <Divider v-if="index!==0" type="vertical" />
                            <a :style="item.style" type="text" @click="tableConfig.event[item.event](item,row)">{{ item.label }}</a>
                        </template>
                    </div>
                </template>
                <template v-else>
                    <component :is="tableConfig.handel.compnent" :row='row' :event="tableConfig.event[tableConfig.handel.event]" />
                </template>
            </template>
        </Table>
        <Row align="middle" justify="center" class="i_table_page">
            <template v-if="tableConfig.customSearch && tableConfig.customSearch.length !== 0">
                <component v-for="(item,index) in tableConfig.customSearch" :key="index" :ref="item.mark" :is="item.component" @setSearchInfo="setSearchInfo" @handleRefresh="handleRefresh" :event="item.event?item.event:{}" />
            </template>
            <Page v-if="page.isShow" :total="page.total" :page-size-opts="page.pageSizeOpts" show-sizer @on-page-size-change="changePageSize" @on-change="pageChange" :styles="{ 'margin-top': '10px' }" :page-size="page.limit" :current.sync="page.current" />
        </Row>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['tableConfig', 'pageConfig'],
    data() {
        return {
            page: icu.util.deepClone(this.pageConfig),
            table: {
                tableSize: "default",
                tableFullscreen: false,
            },
            list: [],
            searchInfo: {}
        };
    },
    components: {},
    computed: {
        tableColumns() {
            this.tableConfigs = icu.util.deepClone(this.tableConfig)
            const columns = [...this.tableConfigs.columns];
            return columns.filter((item) => item.show);
        },
    },
    beforeMount() { },
    mounted() {
        if (this.tableConfig.api.name.length !== 0) {
            this["$api"] = this.$Api.get(this.tableConfig.api.name);
        }
    },
    methods: {
        // 自定义输入查询条件，并渲染表格。
        setSearchInfo(_ayData) {
            if (_ayData && _ayData.length !== 0) {
                for (let i = 0; i < _ayData.length; i++) {
                    const item = _ayData[i];
                    this.searchInfo[item.key] = item.value;
                }
            }
        },
        // 重置翻页器并刷新表格。
        resetPage(_searchInfo) {
            let cloneObj = icu.util.deepClone(_searchInfo)
            this.searchInfo = Object.assign({}, this.searchInfo, cloneObj)
            if (this.page.isShow) {
                this.page = icu.util.deepClone(this.pageConfig)
                this.searchInfo['page'] = this.page.current;
                this.searchInfo['limit'] = this.page.limit;
            }
            this.refreshTable(this.searchInfo)
        },
        // 切换每页条数时的回调，返回切换后的每页条数
        changePageSize(size) {
            this.page.current = 1;
            this.page.limit = size;
            this.searchInfo['page'] = this.page.current;
            this.searchInfo['limit'] = this.page.limit;
            this.refreshTable(this.searchInfo);
        },
        // 页码改变的回调，返回改变后的页码
        pageChange(page) {
            this.page.current = page;
            this.searchInfo['page'] = this.page.current;
            this.searchInfo['limit'] = this.page.limit;
            this.refreshTable(this.searchInfo);
        },
        // 渲染表格，走请求刷新表格。
        refreshTable(_searchInfo) {
            switch (this.tableConfig.api.postType) {
                case 'function':
                    this.$api[this.tableConfig.api.func](
                        _searchInfo,
                        (res) => {
                            if (this.page.isShow) {
                                this.page.total = parseInt(res.data.total);
                            }
                            this.list = res.data.records;
                        }
                    );
                    break;
                case 'url':
                    let reqData = this.tableConfig.api.apiType == '$get' ? { params: _searchInfo } : { data: _searchInfo }
                    this.$http[this.tableConfig.api.apiType](this.tableConfig.api.func, reqData).then(res => {
                        if (this.page.isShow) {
                            this.page.total = parseInt(res.data.total);
                        }
                        this.list = res.data.records;
                    })
                    break;

                default:
                    break;
            }
        },
        // 选择某一项
        onSelect(selection, row) {
            this.tableConfig.actionData['rowSelect'] = selection
            this.$emit("on_select", selection);
        },
        // 全选
        onSelectAll(selection) {
            this.tableConfig.actionData['rowSelect'] = selection
            this.$emit("on_selectAll", selection);
        },
        // 只要选中项发生变化时就会触发
        onSelectiOnchange(selection) {
            this.tableConfig.actionData['rowSelect'] = selection
            this.$emit("on_selectOnchange", selection);
        },
        // 改变表格尺寸
        changeTableSize(size) {
            this.table.tableSize = size;
        },
        // 表格全屏
        handleFullscreen() {
            this.table.tableFullscreen = !this.table.tableFullscreen;
            this.$emit("on-fullscreen", this.table.tableFullscreen);
        },
        // 刷新表格数据
        handleRefresh() {
            if (this.page.isShow) {
                this.page.current = 1
                this.searchInfo['page'] = this.page.current;
                this.searchInfo['limit'] = this.page.limit;
            }
            this.refreshTable(this.searchInfo);
        },
        // 选中某一行触发，开启highlight-row时有效。currentRow当前高亮的数据，oldCurrentRow上一次高亮数据
        onCurrentChange(currentRow, oldCurrentRow) {
            this.$emit("row-onCurrentChange", currentRow, oldCurrentRow);
        },
        //树形数据异步方法
        handleLoadData(item, callback) {
            this.$emit("handleLoadData", item, callback);
        }
    },
    watch: {}
}
</script>
<style>
/* .ivu-table-tip { */
/* height: 100% !important; */
/* } */
</style>
<style lang='less' scoped>
.i_table_page {
    position: relative;
}
</style>